<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 下面这个是写死的 -->
        <!-- <div style="width: 100px; height: 100px; background-color: #f00;"></div> -->
        
        <!-- 下面这个是动态的 -->
        <button @click="bgColor = '#0f0' ">修改bgColor</button>
        <button @click="w = '400px' ">修改w</button>
        <button @click="color = 'orange' ">修改color</button>
        <!-- <div style="width: 100px; height: 100px;" :style="{ backgroundColor: bgColor }"></div> -->
        
        <!-- 不加:是写死的，加:是动态的 -->
        <!-- <div style="height: 100px;" :style="{ backgroundColor: bgColor, width: w, color: color}">我是div</div> -->

        <!-- es6的语法：
            在一个对象里，如果左边的键和右边的变量名一样，那么可以简写
        -->
        <div style="height: 100px;" :style="{ backgroundColor: bgColor, width: w, color}">我是div</div>
    </div>
    <script src="./vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    bgColor: '#f00',
                    w: '200px',
                    color: 'blue'
                }
            },
        })
    </script>
</body>
</html>